/*
 * 已售设备搜索
 * @Author: ljb
 * @Date: 2018-03-27 17:51:07
 * @Last Modified by: ljb
 * @Last Modified time: 2018-07-11 15:21:51
 */
<template>
	<Form
		ref="formInline"
		:model="formValidate"
		name="sell-search-form"
		inline
		@keydown.native.enter.prevent="confirmSearch">

		<Form-item
			:label-width="isChinese?80:120"
			:label="$t('equipment.customer_id')"
			prop="customer_id">
			<Select
				v-model="formValidate.customer_id"
				:placeholder="$t('equipment.please_select_customer')"
				name="search-customer_id"
				clearable
				filterable>
				<Option
					v-for="( value , key ) in customers"
					:value="key + ''"
					:key="key">{{ value }}</Option>
			</Select>
		</Form-item>

		<Form-item
			:label-width="isChinese?80:120"
			:label="$t('equipment.code')">
			<i-input
				v-model="formValidate.code"
				:placeholder="$t('equipment.placeholder',{'field':$t('equipment.code')})"
				name="search-uuid"
				type="text"/>
		</Form-item>

		<Form-item
			:label-width="isChinese?80:120"
			:label="$t('equipment.device_name')">
			<i-input
				v-model="formValidate.device_name"
				:placeholder="$t('equipment.placeholder',{'field':$t('equipment.device_name')})"
				name="search-device_name"
				type="text"/>
		</Form-item>

		<Form-item
			:label-width="isChinese?80:120"
			:label="$t('equipment.specification')">
			<i-input
				v-model="formValidate.specification"
				:placeholder="$t('equipment.placeholder',{'field':$t('equipment.specification')})"
				name="search-specification"
				type="text"/>
		</Form-item>

		<Form-item
			:label-width="isChinese?80:120"
			:label="$t('equipment.producer')">
			<i-input
				v-model="formValidate.producer"
				:placeholder="$t('equipment.placeholder',{'field':$t('equipment.producer')})"
				name="search-producer"
				type="text"/>
		</Form-item>

		<Form-item
			:label-width="isChinese?80:120"
			:label="$t('equipment.operator')">
			<i-input
				v-model="formValidate.operator"
				:placeholder="$t('equipment.placeholder',{'field':$t('equipment.operator')})"
				name="search-operator"
				type="text"/>
		</Form-item>

		<Form-item
			:label-width="isChinese?80:120"
			:label="$t('equipment.sold_at')" >
			<DatePicker
				:placeholder="$t('equipment.placeholder',{'field':$t('equipment.sold_at')})"
				name="search-sold_at"
				type="daterange"
				placement="bottom-start"
				style="width: 200px"
				@on-change="changeDate"/>
		</Form-item>

		<Form-item>
			<Button
				type="primary"
				@click="confirmSearch">
				{{ $t('common.search') }}
			</Button>
		</Form-item>

	</Form>
</template>
<script>

export default {

	name: 'SellSearchForm',

	props: {
		customers: {
			type: Object,
			default() {
				return {};
			},
		},
	},

	data() {
		return {
			formValidate: {
				code: '',

				device_name: '',

				specification: '',

				producer: '',

				operator: '',

				customer_id: '',

				time_range: [],
			}, // 搜索框的对象参数
		};
	},

	computed: {
		isChinese() {
			return this.$i18n.locale === 'zh-CN';
		},
	},
	methods: {
		/**
		 * 改变日期之后触发的回调
		 * @param  {Array} date {日期区间}
		 * @return {undefined}
		 */
		changeDate(date) {
			this.formValidate.time_range = date;
		},

		/**
		 * 重置参数
		 * @return {undefined}
		 */
		resetParam() {
			this.$refs.formInline.resetFields();
			this.formValidate.time_range = [];
		},

		/**
         * 确认搜索
         * @return {undefined}
         */
		confirmSearch() {
			const param = {
				device_code: this.formValidate.code,

				device_name: this.formValidate.device_name,

				specification: this.formValidate.specification,

				producer: this.formValidate.producer,

				operator: this.formValidate.operator,

				customer_id: this.formValidate.customer_id,

				time_range: this.formValidate.time_range,
			};

			this.$emit('search', param);
		},

	},

};

</script>
